<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            height: 600px;
            border: 1px solid;
            margin: 0 auto;
            position: relative;

        }
    </style>
</head>

<body>
    <div class="container">

    </div>
    <script>
        // 贪吃蛇 
        // 生成静态的蛇身体；
        // 1.定义方块类；用来生成蛇身体的；
        class Rect {
            constructor(x, y, color) {
                this.ele = document.createElement("div");
                this.ele.style.width = "50px";
                this.ele.style.height = "50px";
                this.ele.style.position = "absolute";
                this.ele.style.border = "1px solid";
                this.ele.style.left = x + "px";
                this.ele.style.top = y + "px";
                this.ele.style.backgroundColor = color;
            }
            addDom(container) {
                container.appendChild(this.ele);
            }
        }

        // let rect1 = new Rect(0,0,"blue");
        // let containerEle = document.querySelector(".container");
        // rect1.addDom(containerEle);

        // let rect2 = new Rect(50,0,"red");
        // rect2.addDom(containerEle);

        // 2.生成蛇类；
        class Snake {
            constructor() {
                this.body = [];
                this.dir = "right";
                this.createBody();
            }
            createBody() {
                for (let i = 0; i < 5; i++) {
                    let rect;
                    if (i == 4) {
                        rect = new Rect(i * 50, 0, "red");
                    } else {
                        rect = new Rect(i * 50, 0, "blue");
                    }
                    this.body.push(rect);
                }
            }
            renderDom(container) {
                this.container = container;
                this.body.forEach(rect => {
                    rect.addDom(container);
                })
            }
            move() {
                // 1.让蛇头移动一个位置；
                let snakeHeadnumX = parseInt(this.body[this.body.length - 1].ele.style.left);
                // console.log(snakeHeadnumX);
                let snakeHeadnumY = parseInt(this.body[this.body.length - 1].ele.style.top);
                switch (this.dir) {
                    case 'right':
                        this.body[this.body.length - 1].ele.style.left = snakeHeadnumX + 50 + "px";
                        break;
                    case 'left':
                        this.body[this.body.length - 1].ele.style.left = snakeHeadnumX - 50 + "px";
                        break;
                    case 'up':
                        this.body[this.body.length - 1].ele.style.top = snakeHeadnumY - 50 + "px";
                        break;
                    case 'down':
                        this.body[this.body.length - 1].ele.style.top = snakeHeadnumY + 50 + "px";
                        break;
                }

                // 2.把最后一个方块干掉；
                // 删除body里的第一个 对象；
                var res = this.body.shift();
                // console.log(this.body);
                res.ele.remove();

                // 3.要在头部的后面新生成一个rect 添加上去；
                let rect = new Rect(snakeHeadnumX, snakeHeadnumY, "blue");
                rect.addDom(this.container); //添加到视图
                this.body.splice(this.body.length - 1, 0, rect);  // 添加到body里

            }
        }

        let containerEle = document.querySelector(".container");
        let snake = new Snake();
        snake.renderDom(containerEle);

        setInterval(() => {
            document.onkeydown = function (e) {
                var key = e.key;
                console.log(key);
                switch (key) {
                    case 'ArrowRight':
                        snake.dir = "right";
                        break;
                    case 'ArrowLeft':
                        snake.dir = "left";
                        break;
                    case 'ArrowUp':
                        snake.dir = "up";
                        break;
                    case 'ArrowDown':
                        snake.dir = "down";
                        break;
                }
            }



            snake.move();


        }, 1000);

// 1.复习 2.放大镜改成  ES6的 3.生成食物 检测碰撞；
    </script>
</body>

</html>